<template>
  <div>
    送你一朵
    <!-- 
        所谓动态class，就是绑定class这个属性，跟前面的属性绑定是一样的 
        绑定之后，class可以写表达式,
        动态绑定之后，里面就可以使用动态属性isRed
    -->
    <!-- 不会变的class可以写死 ,这里是支持两个class存在的-->
    <span class="basic" :class="isRed ? 'red' : 'yellow'">❀</span>
    <button @click="toggoleFlowerColor(true)">我要红花</button>
    <button @click="toggoleFlowerColor(false)">我要黄花</button>
  </div>
</template>
<script>
export default {
  // 定义属性
  data() {
    return {
      isRed: true,
    };
  },
  methods: {
    toggoleFlowerColor(isRed) {
      this.isRed = isRed;
    },
  },
};
</script>
<!-- vue编写样式是在这个标签可以编写 -->
<style>
.basic {
  color: #fff;
  font-size: 26px;
}
.red {
  background-color: red;
}
.yellow {
  background-color: yellow;
}
</style>
